<template>
  <div class="container-box single-step-test q-pa-md">
    <div class="top-wrapper flex">
      <div class="left-container">
        <q-toggle
          label="进样电机打开"
          left-label
          v-model="toggleInjectMachine"
        />
        <div class="voltage-setting">
          <div class="q-mt-sm">
            <p class="flex">
              <label>电压：</label>
              <q-input
                class="width-30"
                outlined
                type="number"
                v-model.number="voltage"
                stack-label
                :dense="dense"
              />
            </p>
            <p class="flex">
              <label>频率：</label>
              <q-input
                class="width-30"
                outlined
                type="number"
                v-model.number="frequency"
                stack-label
                :dense="dense"
              />
              <q-radio v-model="currentType" val="直流" label="直流" />
              <q-radio v-model="currentType" val="交流" label="交流" />
            </p>
          </div>
          <div class="opt-wrap">
            <q-btn label="读取电压" type="submit" outline color="primary" />
            <q-btn label="设置" type="submit" outline color="primary" />
            <q-btn label="校准" type="submit" outline color="primary" />
          </div>
        </div>
      </div>
      <div class="width-40">
        <div class="flex-btn q-my-md">
          <q-btn label="磁吸动作" type="submit" outline color="primary" />
          <q-btn label="磁吸回原点" type="submit" outline color="primary" />
        </div>
        <div class="flex-btn">
          <q-btn label="磁珠混匀" type="submit" outline color="primary" />
          <q-btn label="停止混匀" type="submit" outline color="primary" />
        </div>
      </div>
    </div>
    <q-separator />
    <div class="single-part flex">
      <InjectSampleVue />
      <InjectSiliconeOil />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import InjectSampleVue from "../components/SingleItems/InjectSample.vue";
import InjectSiliconeOil from "../components/SingleItems/InjectSiliconeOil.vue";
export default {
  name: "SingleStepTesting",
  components: {
    InjectSampleVue,
    InjectSiliconeOil,
  },
  setup() {
    const toggleInjectMachine = ref(true);
    const dense = ref(true);
    const dense1 = ref(false);
    const dense2 = ref(false);
    const voltage = ref(200);
    const frequency = ref(0);
    const currentType = ref("直流");
    return {
      toggleInjectMachine,
      dense1,
      dense2,
      dense,
      voltage,
      frequency,
      currentType,
    };
  },
};
</script>

<style lang="scss">
.q-field__control {
  height: 26px;
}
.single-part {
  justify-content: space-around;
}
.my-separator {
  height: auto; /* 根据需要调整高度 */
  width: 1px; /* 设置分隔线的宽度 */
  background-color: #ccc; /* 设置分隔线的颜色 */
}
.top-wrapper {
  justify-content: space-between;
  padding: 0 20px;
  background: #fff;
  .left-container {
    width: 50%;
    border-right: 2px solid #ddd;
  }
}
.voltage-setting {
  justify-content: space-around;
}
.opt-wrap {
  display: flex;
  .q-btn {
    margin: 10px;
  }
}
</style>
